<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .search{
            width: 258px;
            height: 40px;
            margin: 100px auto;
            background-color: white;
        }
        .search input{
            width: 206px;
            height: 40px;
            background: url(images/left.jpg) no-repeat;
            border: 0 none;
            outline-style: none;
            padding-left: 10px;
            color: #cccccc;
            float: left;

        }
        .search button{
            width: 42px;
            height: 40px;
            background: url(images/right.jpg);
            float: left;
            outline-style: none;
            border: 0 none;
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function(){
            var txt = document.getElementById("txt");
//            获得焦点，之后判断搜索框内是否改变过（改变说明用户输入过，不用清空；）
            txt.onfocus = function(){
                if (txt.value == "请输入..."){
                    txt.value = "";
                    txt.style.color = "#333";//字体颜色加深
                }
            }
//            失去焦点，之后判断搜索框内是否为空（为空，说明用户已删除内容，这时要恢复原样）
            txt.onblur = function(){
                if (txt.value == ""){
                    txt.value = "请输入...";
                    txt.style.color = "#ccc";//字体颜色变浅
                }

            }

        }
    </script>
</head>
<body>
<div class="search">
    <input type="text" value="请输入..." id="txt">
    <button></button>
</div>
</body>
</html>